<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            min-width: 1000px;
            font-size: 14px;
            color: #000;
            font-family: 'Microsoft YaHei',arial,sans-serif,"Open Sans",sans-serif;
        }
        .header{
            height: 80px;
        }
        .el-header a{
            text-decoration: none;
            color: #885f40;
            margin-right: 30px;
        }
        .el-main a{
            text-decoration: none;
            color: rgba(13,4,17,0.59);
        }

        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="div_head">
                <el-menu mode="horizontal" background-color="white"
                         text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                    <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">蛋糕</el-menu-item>
                    <el-menu-item index="3">下午茶</el-menu-item>
                    <el-menu-item index="4">精选食材</el-menu-item>
                    <el-menu-item index="5">最新活动</el-menu-item>
                    <el-menu-item index="6">企业专区</el-menu-item>
                    <el-menu-item index="6">会员中心</el-menu-item>
                    <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <div style="height: 541px;width: 1050px;margin: auto;overflow: hidden">
                <div style="margin-top: 35px;margin-bottom: 27px"><a href="">首页></a><a href="">个人中心></a><a href="">收货地址</a></div>

                <div style="margin:20px 30px 10px 10px;width: 1030px;height: 348px;">
                    <h3>新增收货地址</h3>
                    <div style="margin-bottom: 20px;margin-top: 30px">
                        <label>所在省份及城市：</label>
                        <el-input v-model="city" placeholder="请输入省份与城市" style="width: 260px;"></el-input>
                    </div>
                    <div style="margin-bottom: 20px;padding-left: 40px">
                        <label>详细地址：</label>
                        <el-input v-model="detailAddress" placeholder="请输入所在小区的楼房号和楼层以及门牌号，如：3栋401"style="width: 500px"></el-input>
                    </div>
                    <div style="margin-bottom: 20px;padding-left: 54px">
                        <label>收货人：</label>
                        <el-input v-model="consignee" placeholder="请输入收货人姓名" style="width: 260px;"></el-input>
                    </div>

                    <div style="margin-bottom: 20px;padding-left: 12px">
                        <label>您的手机号码：</label>
                        <el-input v-model="phone" placeholder="请输入您的手机号码" style="width: 260px;"></el-input>
                    </div>
                    <div style="margin-left: 110px;margin-bottom: 20px">
                        <el-checkbox v-model="checked">设为默认地址</el-checkbox>
                    </div>
                    <div style="margin-left: 110px">
                        <el-button type="success" style="margin-right: 40px;">确认</el-button>
                        <a href="addAddress.html"><el-button type="info">取消</el-button></a>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer>
            <el-divider></el-divider>
            <div style="width: 1400px;height:181px;margin: auto;">
                <el-row :gutter="20">
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <p>企业获得<span style="color: rgba(239,141,35,0.92)">国际食品安全HACCP管理体系认证</span></p>
                        <p>连续4年蝉联<span style="color: rgba(239,141,35,0.92)">“北京百万市民最喜爱的风尚烘焙品牌”</span></p>
                        <p>在国务院批准设立的「中国品牌日」<span style="color: rgba(239,141,35,0.92)">获十佳人气奖</span></p>
                        <p>荣获北京首批<span style="color: rgba(239,141,35,0.92)">“改革开放40周年名企名店”</span>称号</p>
                    </div></el-col>
                    <el-col :span="8">
                        <p>北京有家食品有限公司 | 2010-2019 1date1cake.com</p>
                        <p>有家食品 版权所有 客服电话：4006-517-217 食品生产许可证</p>
                        <p> 粤ICP备11021841号 工信部网站备案查询</p>
                        <p>粤公网安备 44030502004413号</p>
                        <div class="grid-content bg-purple">
                    </div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">
                        <img src="imgs/ewm.png" style="width: 100px;height: 100px;margin: 40px 100px">
                        <p style="position: relative;bottom: 50px;left: 110px">扫码关注本店</p>
                    </div></el-col>

                </el-row>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                city:"",
                detailAddress:"",
                consignee:"",
                phone:"",
                checked:""
            }
        },
        methods:{

        }
    })
</script>
</html>